<template>
    <div>
        <van-nav-bar title="锦州自助洗车" left-text="首页" @click-left="onClickLeft" />
        <carNumber @getPlateLicense="getPlateLicense" :source="source"></carNumber>
        <van-form>
            <!-- <van-field
                v-model="mobile"
                name="手机号"
                label="车主手机号"
                placeholder="手机号"
                input-align="right"
                type="tel"
                maxlength="11"
            /> -->
            <van-field
                class="money"
                readonly
                clickable
                name="picker"
                :value="moneyObj.amount"
                label="充值余额"
                placeholder="请选择充值余额"
                input-align="right"
                style="color:red"
            />
            <van-field
                class="money"
                v-model="moneyObj.cashBackAmount"
                name="充值返现"
                label="充值返现"
                placeholder="充值返现"
                input-align="right"
                style="color:red"
                readonly
            />
            <van-row gutter="20" v-for="(item,index) in columns" :key="'b'+index" style="margin: 16px;">
                <van-col span="8" v-for="(itemObj,indexObj) in item" :key="'a'+indexObj">
                    <span class="span-button" :style="{color:itemObj.flag ? '#fff' : '',backgroundColor:itemObj.flag ? '#1989fa' : ''}" @click="moneyTop(itemObj)">{{itemObj.amount}}元</span>
                </van-col>
            </van-row>
            <div style="margin: 16px;">
                <van-button block type="info" native-type="submit" @click="payWx">立即支付</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import carNumber from "../components/car";
export default {
    components: {
        carNumber,
    },
    data(){
        return{
            carPlateNo:'',
            columns:[],
            moneyObj:{},
            openId:'',
            mobile:'',
            source:'not'
        }
    },
    mounted(){
        let appId = 'wx29a89680a19e6747'
        let url = window.location.search;
        let start = window.location.search.indexOf("=");
        let end = window.location.search.indexOf("&");
        let code = url.substring(start + 1, end); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        const local = `http://${window.location.host}${window.location.pathname}`
        // const local = 'http://www.pigeon-bazaar.com/notLoggedIn'
        if (code == null || code ==='') {
           window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        }else{
            this.$api.wxlogin({code:code}).then(resp=>{
                if(resp.code==0){
                    this.openId = resp.openId
                }else{
                    // this.$toast(resp.msg)
                    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                }
            })
        }
        this.getAllsetsApi()
    },
    methods:{
        onClickLeft() {
            this.$router.push({
                name:'index'
            })
        },
        // 获取套餐
        getAllsetsApi(){
            this.$api.allsetsApi().then(resp=>{
                if(resp.code == 0){
                resp.allSet.forEach(e => {
                    e.flag = false
                });
                let arr = []
                for(let i = 0; i < resp.allSet.length; i = i + 3){
                    arr.push(resp.allSet.slice(i,i+3))
                }
                this.columns = arr
                }else{
                this.$toast(resp.msg)
                }
            })
        },
        // 接收车牌号
        getPlateLicense(value,type) {
            if(type == 1 || type == 2){
                this.carPlateNo = value;
                this.mobile = '';
                console.log(this.mobile)
            }else{
                this.carPlateNo = '';
                this.mobile = value;
            }
        },
        moneyTop(item){
            item.flag = true
            this.columns.forEach(e=>{
                e.forEach(b=>{
                if(b.id == item.id){
                    this.moneyObj = b
                    b.flag = true
                }else{
                    b.flag = false
                }
                })
            })
        },
        // 支付
        payWx(){
        let parmes = {
            openId: this.openId,
            mobile: this.mobile,
            carPlateNo: this.carPlateNo,
            topupSetId: this.moneyObj.id
        },self = this
        this.$api.preloginwxpay(parmes).then(resp=>{
            if(resp.code == 0){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',resp.orderPayInfo,
                (res)=>{
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        self.$toast('支付成功')
                        setTimeout(()=>{
                          self.$router.push({
                            name:'index'
                          })
                        },3000)
                    }else{
                        self.$toast('支付失败')
                    }
                }
            )
            }else{
            this.$toast(resp.msg)
            }
        })
        }
    }
}
</script>
